<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #title {
            line-height: 40px;
        }

        .list li {
            line-height: 40px;
            border: 1px dashed #333;
        }
    </style>
    <link rel="stylesheet" href="../rest.css">
</head>

<body>
    <div class="wrap">
        <h3 id="title">DOM操作</h3>
        <ul class="list">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
        </ul>
    </div>
</body>


<!-- <script>
    function GetEle(selector) {
        this.list = document.querySelectorAll(selector)
    }
    GetEle.prototype.setHtml = function (con) {
        for (var i = 0; i < this.list.length; i++) {
            var ele = this.list[i]
            ele.innerHTML = con
        }
    }
    GetEle.prototype.getHtml = function () {
        return this.list[0].innerHTML
    }
    var $liList = new GetEle(".list li")
    $liList.setHtml("abc123")
    console.log($liList)//返回的是GetEle {list: NodeList(6)}
    console.log($liList.getHtml())
</script> -->


<script>
    function GetEle(selector) {
        var list = document.querySelectorAll(selector)
        list = Array.from(list)
        Object.setPrototypeOf(list, GetEle.prototype) // 在修改真数组的原型属性([[Prototype]])
        console.log(this)
        return list// [ele,ele,ele,ele]  构造函数返回自定义实例化对象
    }
    GetEle.prototype.setHtml = function (con) {
        // this => 调用此方法的实例化对象 => 获取元素的集合(伪数组)
        for (var i = 0; i < this.length; i++) {
            var ele = this[i]
            ele.innerHTML = con
        }
    }
    GetEle.prototype.getHtml = function () {
        return this[0].innerHTML
    }
    var $liList = new GetEle(".list li") // [li,li,li,li,li,li]
    console.log($liList)
    $liList.setHtml("abc123")
    console.log($liList.getHtml())
</script>

</html>